<template>
	<view>
		<view class="title">
			<text>查看全部</text>
		</view>
		<view class="content">
			<view style="margin-top: 40rpx;">
				<text style="color:#191919;font-size: 26rpx;">兑换条件 | <text style="font-size: 20rpx;color: #232323;"> 集齐{{name}}卡片</text></text>
			</view>
			<view class="white-card">
				<text>已拥有</text>
			</view>
			<view class="card_content">
				<u-image v-for="(item,index) in infoData" :key="index" @click="handleDetail(item)" class="picture" borderRadius="10rpx"
				 width="80rpx" height="110rpx" :src="img+item.thumbnails"></u-image>
			</view>
			<view class="white-card">
				<text>未拥有</text>
			</view>
			<view class="card_content">
				卡片区域
			</view>
		</view>
		<u-modal v-model="show" title="人物资料" :show-confirm-button="false" :mask-close-able="true">
			<view class="detailcontent">
				<u-image class="left picture" borderRadius="10rpx" width="80rpx" height="130rpx" :src="img+detailinfo.thumbnails"></u-image>
				<view class="right">
					<text style="font-weight: bold;">{{detailinfo.name}}</text>
					<text>获取时间 {{detailinfo.updated_at}}</text>
					<text>卡牌张数 {{detailinfo.name}}</text>
				</view>
			</view>
			<p v-html="detailinfo.describe"></p>
		</u-modal>
	</view>
</template>

<script>
	import uModal from "../../uview-ui/components/u-modal/u-modal.vue";
	export default {
		components: {
			uModal
		},
		data() {
			return {
				show: false,
				infoData: [],
				name: '',
				img: getApp().globalData.imgbaseUrl2,
				detailinfo: {}
			};
		},
		onLoad(options) {
			this.name = options.name;
			this.$api.getExchangeDetail(options.id).then(res => {
				this.infoData = res.data.tabulatingCard;
			})
		},
		methods: {
			handleDetail(item) {
				this.show = true;
				this.detailinfo = item;
				console.log('item', item);
			}
		}
	}
</script>

<style lang="scss">
	/deep/.u-model__title{
		font-weight: bold;
	}
	.title {
		height: 81rpx;
		background: #EEEEEE;
		text-align: center;

		text {
			line-height: 81rpx;
			color: #3C3C3C;
			font-size: 30rpx;
		}
	}

	.content {
		margin: 0 33rpx;

		.white-card {
			height: 78rpx;
			display: flex;
			align-items: center;
			border-radius: 10px;
			margin-top: 20rpx;
			padding-left: 20rpx;

			text {
				font-size: 26rpx;
				color: #191919;
			}
		}
	}

	.card_content {
		margin-top: 40rpx;
		display: flex;
		flex-wrap: wrap;

		.picture {
			margin: 10rpx;
		}
	}

	.detailcontent{
		margin: 40rpx;
		display: flex;
		.left{
			margin-right: 30rpx;
		}
		.right{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			text{
				font-size: 14px;
			}
		}
	}
	p{
		margin: 20rpx 40rpx;
	}
</style>
